<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="${path}/common/css/common.css"/>
		<script src="${path}/common/lib/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{background-image:url(${path}/common/img/tushuguanbg.jpg);background-size: 100%; font-family: "微软雅黑";}
			form {}
			#tongji { margin-top: 5%;}
			div.content{}
			#tongji div{display: inline-block;}
			#tongji> div{width: 21%; text-align: right;}
			#tongji > div > div{width: 95px;text-align: center;float: right;}
			#tongji img{width: 70px;height: 70px;}
			#tongji > div > div .shuju{font-size: 40px; color: white;display: block;}
			#tongji > div > div .beizhu{font-size: 12px; color: white;}
			h1{text-align: center; color: white; font-size: 55px;font-weight:normal;}
			.demo .bounceInDown{margin-right: 20px; display:inline-block; width: 150px; height: 45px; background-color: #10A5E8;border-radius: 4px;color: white;line-height: 45px;font-size:20px;}
			.demo .huanshu{margin-left: 20px; display:inline-block; width: 150px; height: 45px; background-color: #E63462;border-radius: 4px;color: white;line-height: 45px;font-size:20px;}
			.demo{ margin-top: 200px;}
		</style>
	</head>
	<body>
		<header id="tongji">
			<div class="tj_shuji">
				<img src="${path}/common/img/书籍.png"/>
				<div class="">
					<span id="shujishuju" class="shuju">
					</span>
					<span id="" class="beizhu">
					书籍统计
					</span>
				</div>
			</div>
			<div class="tj_shuji">
				<img src="${path}/common/img/读者借阅统计.png"/>
				<div class="">
					<span id="duzheshuju" class="shuju">
					</span>
					<span id="" class="beizhu">
					读者统计
					</span>
				</div>
			</div>
			<div class="tj_shuji">
				<img src="${path}/common/img/借阅查询.png"/>
				<div class="">
					<span id="jieyueshuju" class="shuju">
					</span>
					<span id="" class="beizhu">
					借阅查询
					</span>
				</div>
			</div>
			<div class="tj_shuji">
				<img src="${path}/common/img/贷款逾期.png"/>
				<div class="">
					<span id="yuqishuju" class="shuju">
					</span>
					<span id="" class="beizhu">
					逾期查询
					</span>
				</div>
			</div>
		</header>
		
		<h1>XX图书馆</h1>
		
		
		
		
		<div id="wrapper">
			<div class="box">
				<div class="demo">
					<a href="javascript:;" class="bounceInDown">借书</a>
					<a href="#" class="huanshu ">还书</a>
				</div>
				<div id="dialogBg"></div>
				<div id="dialog" class="animated">
					<img class="dialogIco" width="50" height="50" src="${path}/common/images/ico.png" alt="" />
					<div class="dialogTop">
						<a href="javascript:;" class="claseDialogBtn" id="jieshu">关闭</a>
					</div>
					<form action="" method="post" id="editForm">
						<ul class="editInfos">
							<li><label><font color="#ff0000">* </font>书籍编号：<input type="text" name="book_id" id="book_id" required value="" class="ipt" /></label></li>
							<li><label><font color="#ff0000">* </font>手机号码：<input type="text" name="userPhone" id="userPhone"  value="" class="ipt" /></label></li>
							<li><label><font color="#ff0000">* </font>借阅期限：<input type="text" name="term" id="term"  value="" class="ipt" /></label></li>
							<li><input type="submit" value="确认提交" class="submitBtn" name="tijiao" id="tijiao"/></li>
						</ul>
					</form>
				</div>
				</div>
			</div>
		</div>
		
		
		
		
		
		
		<script type="text/javascript">
		$(".huanshu").click(function(){
				className = $(this).attr('class');
				$('#dialogBg').fadeIn(300);
				$('#dialog').removeAttr('class').addClass('animated ' + className + '').fadeIn();
			
			$(".editInfos li:nth-child(2),.editInfos li:nth-child(3)").css("display","none");
			
			$("#tijiao").click(function(){
				var book_id = $("#book_id").val();
				$.ajax({
					type:"post",
					url:"${path}/btn?book_id="+book_id+"&commond=bookId",
					success:function(deta){
						
					}
				});
			});
		});
		
			
			
			
			
			var w,h,className;
			function getSrceenWH(){
				w = $(window).width();
				h = $(window).height();
				$('#dialogBg').width(w).height(h);
			}

			window.onresize = function(){  
				getSrceenWH();
			}  
			$(window).resize();  

			
			
			
			
			
			
			
			
			
			
			$(function(){
				$.ajax({
					type:"post",
					url:"${path}/btn?commond=tongji",
					success:function(deta){
						tj(JSON.parse(deta));
					}
				});
				
				
				getSrceenWH();
				
				//显示弹框
				$('.box .bounceInDown').click(function(){
					$(".editInfos li:nth-child(2),.editInfos li:nth-child(3)").css("display","block");
					className = $(this).attr('class');
					$('#dialogBg').fadeIn(300);
					$('#dialog').removeAttr('class').addClass('animated '+className+'').fadeIn();
					
					
					$("#tijiao").click(function(){
						var book_id = $("#book_id").val();
						var term = $("#term").val();
						var userPhone = $("#userPhone").val();
						$.ajax({
							type:"post",
							url:"${path}/btn?term="+term+"&book_id="+book_id+"&userPhone="+userPhone,
							async:false,
							success:function(deta){
								if(deta == 401){
									alert("此书不存在或已被借阅");
									return;
								}else if(deta == 402){
									alert("该手机号尚未登记");
									return;
								}
							}
						});
					});
				});
				
				//关闭弹窗
				$('.claseDialogBtn').click(function(){
					$('#dialogBg').fadeOut(300,function(){
						$('#dialog').addClass('bounceOutUp').fadeOut();
					});
				});
			});
			
			function tj(number){
				
				var sj=0;
				var sj1 = setInterval(function () {
					$("#shujishuju").text(sj);
					sj += 1;
					if(sj > (number.bookNum+1100)) {
						clearInterval(sj1);
					}
				}, 1);
				
				
				var dz=0;
				var dz1 = setInterval(function () {
					$("#duzheshuju").text(dz);
					dz += 1;
					if(dz > (number.userNum+250)) {
						clearInterval(dz1);
					}
				}, 1);
				
				var jy=0;
				var jy1 = setInterval(function () {
					$("#jieyueshuju").text(jy);
					jy += 1;
					if(jy > (number.borrowNum+50)) {
						clearInterval(jy1);
					}
				}, 1);
				
				
				var yq=0;
				var yq1 = setInterval(function () {
					$("#yuqishuju").text(yq);
					yq += 1;
					if(yq > (number.overdueNum+5)) {
						clearInterval(yq1);
					}
				}, 1);
				
			}
			
		</script>
	</body>
</html>